<script setup lang="ts">
import { ref, reactive } from 'vue'
import { changePasswordApi } from '@/api/member'
import { refreshPage } from '@/utils/common'

const popup = ref()
const popupDialog = ref()
const formRef = ref()
const resetPasswordRef = ref()

const form = reactive({
  old_password: '',
  new_password: '',
  confrim_password: '',
})

const formRules = reactive({
  old_password: {
    rules: [
      {
        required: true,
        errorMessage: 'Please enter your old password',
      },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(?!.*[&<>"'\n\r]).{6,32}$/.test(value)) {
            return callback('Password must be 6-32 characters and cannot contain & < > " ')
          }
        },
      },
    ],
  },
  new_password: {
    rules: [
      {
        required: true,
        errorMessage: 'Please enter new password',
      },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(?!.*[&<>"'\n\r]).{6,32}$/.test(value)) {
            return callback('Password must be 6-32 characters and cannot contain & < > " ')
          }
        },
      },
    ],
  },
  confrim_password: {
    rules: [
      {
        required: true,
        errorMessage: 'Please confirm your new password',
      },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(?!.*[&<>"'\n\r]).{6,32}$/.test(value)) {
            return callback('Password must be 6-32 characters and cannot contain & < > " ')
          }
        },
      },
    ],
  },
})

const open = () => {
  popup.value?.open()
}

const onConfirm = async () => {
  try {
    await formRef.value.validate()

    if (form.new_password !== form.confrim_password) {
      return uni.showToast({
        title: 'The new passwords do not match',
        icon: 'none',
        mask: true,
      })
    }

    await changePasswordApi({
      old_password: form.old_password,
      new_password: form.new_password,
    })

    uni.showToast({ title: 'Successfully updated', icon: 'success' })

    setTimeout(() => {
      refreshPage()
    }, 1500)
  } catch (err) {
    console.log(err)
  }
}

defineExpose({ popup, open })

// 重置密码
const resetPassword = () => {
  resetPasswordRef.value.open()
}
</script>
<template>
  <view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        ref="popupDialog"
        mode="input"
        title="Change Password"
        @confirm="onConfirm"
        @close="popupDialog.popup.close()"
        :before-close="true"
      >
        <uni-forms
          ref="formRef"
          :model="form"
          :rules="formRules"
          validateTrigger="blur"
          label-position="top"
        >
          <view class="remark">
            <text>
              If you haven't set a password or forgot it, please select
              <text class="reset-btn" @tap="resetPassword">Reset Password</text>
            </text>
          </view>
          <uni-forms-item name="old_password" label="Old Password" required>
            <uni-easyinput
              v-model="form.old_password"
              type="password"
              placeholder="Enter your old password"
              maxlength="32"
            />
          </uni-forms-item>
          <uni-forms-item name="new_password" label="New Password" required>
            <uni-easyinput
              v-model="form.new_password"
              type="password"
              placeholder="Enter your new password"
              maxlength="32"
            />
          </uni-forms-item>
          <uni-forms-item name="confrim_password" label="Confirm Password" required>
            <uni-easyinput
              v-model="form.confrim_password"
              type="password"
              placeholder="Confirm your new password"
              maxlength="32"
            />
          </uni-forms-item>
        </uni-forms>

        <shop-reset-password ref="resetPasswordRef" />
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<style lang="scss" scoped>
.remark {
  font-size: 24rpx;
  padding-bottom: 40rpx;
}
.uni-popup-dialog{
  width: 600rpx;
}
.reset-btn {
  color: red;
  font-size: 30rpx;
  padding-left: 20rpx;
  background: #fff;

  &::after {
    border: none;
  }
}
</style>
